<template>
	<view class="page">
		<form>
			<view class="uni-form-item uni-column view-flex title-item">
				<view class="title-left">服务地址</view>
                <view class="title-right">{{areaName ? areaName: ''}}</view> 				
				<view @click="chooseLocation" class="title-right-huoq">
					点击获取
				</view>
		    </view>
			<view class="line"/>
			<view class="uni-form-item uni-column view-flex title-item flex">
				<view class="title-left">详细地址</view>
			    <view class="title-right">
				   <input v-model="addr" class="uni-input" focus placeholder="输入详细地址" />
				</view> 				
			</view>
			<view class="line"/>
			
			<view class="uni-form-item uni-column view-flex title-item">
				<view class="title title-left text-xingm">
					<text>姓</text>
					<text>名</text>
				</view>	
			    <view class="title-right">
				   <input v-model="userName" class="uni-input" focus placeholder="请输入联系人" />
				</view> 				
			</view>
			<view class="line"/>
			
		<view class="uni-form-item uni-column view-flex title-item">
			<view class="title title-left text-xingm">
				<text>电</text>
				<text>话</text>
			</view>	
		    <view class="title-right">
			   <input v-model="tel" class="uni-input" focus placeholder="请输入电话" />
			</view> 				
		</view>
			<view class="line"/>
			
			<view class="uni-form-item uni-column view-flex title-item">
				<view class="title-left">是否默认</view>
			    <view class="title-right">
					    <switch class="isOrnot"name="switch" :checked="isCheckd" @change="switch2Change"/>
				</view> 				
			</view>
			<view>
				<button @click="addOrUpd" class="address-but">确定</button>
			</view>
	    </form>		
	</view>
</template>

<script>
import {
   storeUserAddress,
   selOrderAddressById
} from '../../service/base.js';
	export default {
		data() {
			return{
				areaName: '',
				areaFullName: '',
				lat: '',
				lng: '',
				addr: '',
				userName: '',
				tel: '',
				isDefault: 0,
				id:'',
				isCheckd:false,
				areaCode: ''
			}
		},
		onLoad(options) {
			var addr = uni.getStorageSync("addr")
			if(addr){
				this.id = addr.id
				this.tel = addr.mobile
				this.userName = addr.name
				this.areaName = addr.areaName
				this.addr = addr.addrName
				this.isCheckd = addr.isDefault == 1
				this.isDefault = addr.isDefault
			}
		},
		methods:{
			/* 授权手机号 */
			authPhone(e) {
			  getPhoneNumber({encryptedData: e.detail.encryptedData, iv: e.detail.iv}).then(res => {
			    console.log(res);
			    this.tel = res.data.phoneNumber;
			  });
			},
			chooseLocation() {
				uni.chooseLocation({
				    success: res => {
						this.areaName = res.address
						this.areaFullName = res.name
						this.lat =res.latitude 
						this.lng = res.longitude
						var params = this.lat+","+this.lng
						var that = this
						getLocations({"addrLngAndLat":params}).then(res => {
							that.areaCode = res.data.result.ad_info.adcode
						})
				    }
				});
			},
			getPhoneNumber(e) {
				console.log(e)
			},
			addOrUpd() {
				if(!this.areaName){
					uni.showToast({
						icon:"none",
						title:"请选择服务地址"
					})
				}else if(!this.addr){
					uni.showToast({
						icon:"none",
						title:"请输入详细地址"
					})
				}else if(!this.userName){
					uni.showToast({
						icon:"none",
						title:"请输入联系人"
					})
				}else if(!this.tel){
					uni.showToast({
						icon:"none",
						title:"请输入联系电话"
					})
				}else{
					var obj = {
						mobile:this.tel,
						name:this.userName,
						area_name:this.areaName+this.areaFullName,
						addr_name:this.addr,
						addr: this.addr,
						is_default: this.isDefault
					}
					if(this.id){
						obj.id = this.id
					}
					storeUserAddress(obj).then(res =>{
						 uni.navigateBack({
						 	delta:1
						 })
					})
				}
			},
			switch2Change(e) {
				this.isDefault = e.target.value ? 1:0
			}
		}
	}	
</script>

<style lang="scss">
	page{
		background: #FBFDFB;
		height: 100%;
	}
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.view-flex {
		display: flex;
	}
	.view-flex-butt {
		display: flex;
		justify-content: space-between;
	}
	.title-item{
		background-color: #ffffff;
		align-items: center;
		height: 98rpx;
		}
	.title-left{
		align-items: center;
		font-size: 28rpx;
		margin-left: 50rpx;
		
	}
	.line{
			margin-top: 1rpx;
			height: 1rpx;
			background-color: #ededed;
	}
	.title-right-huoq{
		align-items: center;
		font-size: 26rpx;
		color: #39abf1;
		}
	.title-right{
		align-items: center;
		font-size: 24rpx;
		margin-left: 40rpx;
	}
	.title-rightp{
		font-size: 24rpx;
		margin-left: -60rpx;
	}
	.title-right-phone{
		align-items: center;
		font-size: 24rpx;
	}
	.title-right-but{
		align-items: center;
		font-size: 24rpx;
		margin-left: 30rpx;
	}
	.phone{
		margin-right: 25rpx;
		font-size: 23rpx;
	}
	.flex{
		display:flex;
	}
	.display_flex_column {
		display: flex;
		flex-direction: column;
	}
		
	.isOrnot{
		height: 40rpx;
		width: 50rpx;
	}
	.address-but{
		margin-top: 90rpx;
		width: 690rpx;
		font-size: 30rpx;
		background-color: #20c16d;
		color: #ffffff;
	}
	.uni-input-phone{
		// margin-left: -30rpx;
		// width: 320rpx;
	}
	.text-xingm{
		display: flex;
		justify-content:space-between;
		width: 110rpx;
	}
</style>
